<template>
  <section class="block-box">
    <div class="block-option">
      <a-popconfirm title="确定删除吗？" @confirm="onDelete" @cancel="visible = false" okText="确定" cancelText="取消">
        <a class="block-template__close"><a-icon type="close-circle" /></a>
      </a-popconfirm>
    </div>
    <div class="form-wrapper">
      <div class="form-row">
        <div class="form-item__label">列表名称</div>
        <div class="form-item__content">
          <a-input type="text" v-model="model.title" placeholder="输入列表名称" />
        </div>
      </div>
      <div class="form-row">
        <div class="form-item__label">副标题</div>
        <div class="form-item__content">
          <a-input type="text" v-model="model.subTitle" placeholder="输入副标题" />
        </div>
      </div>
    </div>
    <div class="book-table-title">
      列表商品
      <div class="mode">
        <span>视图模式: </span>
        <a-select defaultValue="LIST" v-model="model.mode" size="small">
          <a-select-option value="LIST"><a-icon type="ordered-list" /></a-select-option>
          <a-select-option value="GRID"><a-icon type="table" /></a-select-option>
        </a-select>
      </div>
    </div>
    <a-table bordered :dataSource="model.goodsList" :show-header="false" :pagination="false" :rowKey="record => record.goodsId" size="middle" class="book-table" style="width: 100%" v-if="model.goodsList!=null && model.goodsList.length>0">
      <a-table-column width="60" dataIndex="mainImage" key="mainImage" align="left">
        <template slot-scope="text,record">
          <img :src="record.cover" class="book-img" v-if="record.cover" />
          <img src="../../../assets/images/nogoods.png" class="book-img" v-else />
        </template>
      </a-table-column>
      <a-table-column dataIndex="name" key="name" align="left">
        <template slot-scope="text,record">
          <div class="book-tit">
            <span class="book-sort">标题:</span>
            <a-input size="small" style="width:150px" placeholder="标题" v-model="record.title"></a-input>
          </div>
          <div class="book-tags">
            <span class="book-sort">标签:</span>
            <a-input size="small" style="width:150px" placeholder="标签" v-model="record.tags"></a-input>
          </div>
        </template>
      </a-table-column>
      <a-table-column align="center">
        <template slot-scope="text,record">
          <p class="default_tips">价格:</p>
          <a-input size="small" style="width:150px" placeholder="价格" v-model="record.price"></a-input>
        </template>
      </a-table-column>
      <a-table-column width="120" dataIndex="sort" align="center">
        <template slot-scope="text,record">
          <p class="default_tips">排序:</p>
          <a-input-number size="small" style="width:50px" v-model="record.sort" :min="1" @change="onSortChange"></a-input-number>
        </template>
      </a-table-column>
      <a-table-column width="30" align="center" dataIndex="delete">
        <template slot-scope="text,record,index">
          <a @click="onItemClose(index,record)" title="删除"><a-icon type="delete" /></a>
        </template>
      </a-table-column>
    </a-table>
    <div>
      <a class="book-add" @click="onItemAdd">+添加商品</a>
    </div>
    <a-modal top="2vh" title="添加商品" v-model="dialogVisible" :footer="null" width="800px" :maskClosable="false" @cancel="handleClose">
      <select-goods @result="emitSave" v-if="dialogVisible"></select-goods>
    </a-modal>
  </section>
</template>

<script>
import SelectGoods from "../../../components/SelectGoods/index";
import {fmMoney} from "../../../utils";

export default {
    name:"Block",
    props:{
      block:{
        type:Object,
        default:null
      },
      templateId:{
        type:Number,
        default:null
      }
    },
    components:{
      SelectGoods
    },
    data(){
      return{
        model:{},
        template:{
          id:null,
          title:'',
          subTitle:'',
          imageUrl:'',
          linkUrl:'',
          mode:'LIST',
          sort:1,
          goodsList:[{
            id:null,
            sort:1,
            goodsId:null,
            title:'',
            cover:'',
            tags:'',
            price:'',
            goods: {
            },
            deleted:'UN_DELETED',
          }],
          deleted:'UN_DELETED',
        },
        deleteBookList:[],
        dialogVisible:false,
        loading:false,
        isLoading:false,
        visible:false,
      }
    },
  watch:{
      model: {
        handler(value,oldValue){
          this.autoUpdate();
        },
        immediate:true,
        deep:true
      }
  },
    methods:{
      fmMoney,
      onDelete(){
        //删除 block
        if(this.model.id != null){
          this.model.deleted='DELETED'
          this.autoUpdate()
          this.$emit('close', true)
        }else{
          this.$emit('delete',null)
        }
      },
      handleClose(){
        this.dialogVisible = false
      },
      onItemClose(index,row){
        if(this.model.goodsList[index].id != null){
          let book = this.model.goodsList[index];
          book.deleted = 'DELETED';
          this.deleteBookList.push(book);
        }
        this.model.goodsList.splice(index, 1)
        this.autoUpdate()
      },
      onItemAdd(){
        this.dialogVisible = true;
      },
      emitSave(book){
          console.log('============book',book);
        this.dialogVisible = false;
        if(book != null){
          let bookList = this.model.goodsList;
            console.log('============bookList',bookList);
          if(bookList.filter(m=>m.goodsId === book.id).length>0) return;
            console.log('==========-------==');
          let maxSort = bookList.length>0?bookList[bookList.length-1].sort:0;
          this.model.goodsList.push({
            sort:maxSort+1,
            goodsId:book.id,
            goodsTypeId:book.goodsTypeId,
            type:book.type,
            title:book.name,
            cover:book.mainImage,
            tags:'',
            price: fmMoney(book.minPrice,2)+(book.specSize>1?(' ~ '+ fmMoney(book.maxPrice,2)):''),
            goods:book,
            deleted:'UN_DELETED',
              barCode:book.barCode
          })
        }
        this.autoUpdate()
      },
      onSortChange(){
        this.$nextTick(()=>{
          this.model.goodsList.sort((a,b)=>{ return a.sort - b.sort})
          this.autoUpdate()
        })
      },
      init(){
        let newBlock = {...this.template};
        this.model = newBlock;
      },
      autoUpdate(){
        let model = {...this.model}
        let goodsList = model.goodsList || []
        model.goodsList = goodsList.concat(this.deleteBookList);
        this.$emit("update:block",model)
      }
    },
    mounted(){
      if(this.block != null && this.block.title) {
        this.model = {...this.block}
        console.log(this.model)
        return;
      }
      // this.init();
    }
  }
</script>

<style scoped>
  .form-wrapper{
    display: block;
  }
  .form-row{
    display: flex;
    line-height: 36px;
    margin-bottom:10px;
  }
  .form-row .form-item__label{
    flex-grow: 0;
    width:80px;
    font-size:14px;
    font-weight: bolder;
    color:#666;
  }
  .form-row .form-item__content{
    flex-grow: 1;
    text-align: left;
  }
  .block-box{
  }
  .block-option{
    position: relative;
    display: block;
    text-align: right;
    margin-top:-5px;
    padding-bottom:5px;
  }
  .block-box .book-table-title{
    font-size:14px;
    font-weight: bolder;
    color:#606266;
    padding-bottom:10px;
    position: relative;
  }
  .book-table-title .mode{
    position: absolute;
    right:0px;
    top:0;
  }
  .book-table .book-img{
    width:50px;
    height:50px;
    padding:1px;
    border:1px solid #f2f2f2;
  }
  .book-table .book-tit{
    margin:0;
    padding: 0;
    line-height: normal;
    font-size:14px;
  }
  .book-table .book-tit{
    color:#2C2B2A;
    font-weight:bolder;
    padding-bottom:7px;
  }
  .book-table .book-price{
    color:#EB5A64;
  }
  .block-box .book-add{
    display: inline-block;
    margin-top:15px;
    font-size:14px;
    color:#2BB89A;
  }
</style>
